﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ajax,jquery,省市联动" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<title>基于jQuery+JSON的省市联动效果</title>

<style type="text/css">
.demo{width:80%; margin:20px auto}
.demo h3{height:32px; line-height:32px}
.demo p{line-height:24px}
pre{margin-top:10px; padding:6px; background:#f7f7f7}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cityselect.js"></script>
<script type="text/javascript">
$(function(){
	$("#city_1").citySelect({
		nodata:"none",
		required:false
	}); 
	$("#city_2").citySelect({
		prov:"北京",
		nodata:"none"
	});
	
	$("#city_3").citySelect({
    	prov:"湖南", 
    	city:"长沙"
	});
	$("#city_4").citySelect({
    	prov:"湖南", 
    	city:"长沙",
		dist:"岳麓区",
		nodata:"none"
	}); 
	
	$("#city_5").citySelect({
		url:"/plugin/cityselect/js/expressData.json",
		prov:"",
		city:"",
		dist:"",
		nodata:"none"
	});
});
</script>
</head>

<body>
<div id="header">
   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
</div>

<div id="main">
  <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-188.html">基于jQuery+JSON的省市联动效果</a></h2>
  

  <div class="demo">
  	<h3>直接调用</h3>
    <p>二级联动，默认选项为：请选择</p>
  	<div id="city_1">
  		<select class="prov"></select> 
    	<select class="city" disabled="disabled"></select>
    </div>
    <p>三级联动，默认省份：北京，隐藏无数据的子级select</p>
    <div id="city_2">
  		<select class="prov"></select> 
    	<select class="city" disabled="disabled"></select>
        <select class="dist" disabled="disabled"></select>
    </div>
    <pre>
$("#city_1").citySelect({nodata:"none",required:false}); 
$("#city_2").citySelect({prov:"北京",nodata:"none"});
    </pre>
  </div>
  
  <div class="demo">
  	<h3>设置省份、城市、地区（县）的默认值</h3>
    <p>二级联动</p>
  	<div id="city_3">
  		<select class="prov"></select> 
    	<select class="city" disabled="disabled"></select>
    </div>
    <p>三级联动</p>
    <div id="city_4">
  		<select class="prov"></select> 
    	<select class="city" disabled="disabled"></select>
        <select class="dist" disabled="disabled"></select>
    </div>
    <pre>
$("#city_3").citySelect({prov:"湖南", city:"长沙"});
$("#city_4").citySelect({prov:"湖南", city:"长沙", dist:"岳麓区"}); 
    </pre>
  </div>
  
  <div class="demo">
  	<h3>自定义下拉选项</h3>
  	<div id="city_5">
  		<select class="prov"></select>
		<select class="city" disabled="disabled"></select>
		<select class="dist" disabled="disabled"></select>
    </div>
    <pre>
$("#city_5").citySelect({
	url:{"citylist":[
		{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
		{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
		{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
	]},
	prov:"",
	city:"",
	dist:"",
	nodata:"none"
});
    </pre>
  </div>
  <br />
<br />

</div>
<div id="footer">
    <p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>

</body>
</html>
